<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="所属仓库" prop="warehouseCode" style="margin-right:15px" label-width="120px">
              <el-select v-model="form.warehouseCode" placeholder="请输入所属仓库"  @change="setSpace($event)"  style="width:100%">
                <el-option
                  v-for="item in warehouseData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="所属库区" style="margin-right:15px"  label-width="120px" prop="spaceCode">
              <el-select v-model="form.spaceCode" placeholder="请输入所属库区 " style="width:100%" clearable>
                <el-option
                  v-for="item in spaceData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>

            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="库位编码" style="margin-right:15px"  label-width="120px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入库位编码" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="库位类型" style="margin-right:15px"  label-width="120px" prop="locationType">
              <el-select v-model="form.locationType" placeholder="请输入库位类型 " style="width:100%" clearable>
                <el-option
                  v-for="item in locationTypeData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="库位承载类型" style="margin-right:15px"  label-width="120px" prop="bearType">
              <el-select v-model="form.bearType" placeholder="请输入库位承载类型 " style="width:100%" clearable>
                <el-option
                  v-for="item in bearTypeData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="上架动线号" style="margin-right:15px"  label-width="120px" prop="shelvesNumber">
              <el-input v-model="form.shelvesNumber"  placeholder="请输入上架动线号" style="width:100%"  />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="拣货动线号" style="margin-right:15px"  label-width="120px" prop="pickNumber">
              <el-input v-model="form.pickNumber" placeholder="请输入拣货动线号" style="width:100%"   />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="盘点动线号" style="margin-right:15px"  label-width="120px" prop="inventoryNumber">
              <el-input v-model="form.inventoryNumber" placeholder="请输入盘点动线号" style="width:100%"   />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="混放策略" style="margin-right:15px"  label-width="120px" prop="storageStrategy">
              <el-select v-model="form.storageStrategy" placeholder="请输入混放策略 " style="width:100%" clearable>
                <el-option
                  v-for="item in storageStrategyTypeData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="出入库锁" style="margin-right:15px"  label-width="120px" prop="ioLock">
              <el-select v-model="form.ioLock" placeholder="请输入出入库锁 " style="width:100%" clearable>
                <el-option
                  v-for="item in ioLockData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px"  label-width="120px" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" style="width:100%" maxlength="100"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit"  :disabled="isDisable" plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { locationAdd, getWarehouseSpace} from '@/api/basicInfo'

Vue.use(VXETable)
export default {
  name: 'location-controller-add',
   props:{
    warehouseData:{
      type: Array,
      required: true
    },
    bearTypeData:{
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isDisable:false,   //确定键显示按钮

      // warehouseData:[],           //仓库列表
      spaceData:[],               //库区列表
      locationTypeData:[          //库位类型列表
        { code: "0", name: "拣货" },
        { code: "1",name: "存货" },
        { code: "2",name: "集货" },
      ],
      // bearTypeData:[],            //库位承载类型列表
      storageStrategyTypeData:[   //混放策略列表
        { code: "0", name: "商品混放" },
        { code: "1",name: "批次混放" },
        { code: "2",name: "混放" },
        { code: "3",name: "不混放" },
      ],
      ioLockData:[                //出入库锁列表
        { code: "0",name: "入库锁" },
        { code: "1",name: "出库锁" },
        { code: "2",name: "全锁" },
        { code: "3",name: "不锁" },
      ],
      form: {
        bearType:'',                            //库位承载类型 ,
        code:'',                                //数据标识 ,
        inventoryNumber:'',                     //盘点动线号 ,
        ioLock:'',                              //出入库锁 ,
        locationType:'',                        //库位类型 ,
        name:'',                                //库位名称 ,
        pickNumber:'',                          //拣货动线号 ,
        remarks:'',                             //备注 ,
        serialNumber:'',                        //编码 ,
        shelvesNumber:'',                       //上架动线号 ,
        spaceCode:'',                           //所属库区 ,
        status:'',                              //状态 ,
        storageStrategy:'',                     //存放策略 ,
        total:'',                               //总数 ,
        warehouseCode:'',                       //所属仓库
      },
      rules: {
        pickNumber:[
          { required: false, message: '拣货动线号必须填写' },
          { pattern: /^[1-9]+[0-9]*$/, message: '拣货动线号为大于0的正整数' },
          {  max: 10, message: '数据不能超过10位', trigger: 'blur' }
        ],
        inventoryNumber:[
          { required: false, message: '盘点动线号必须填写' },
          { pattern: /^[1-9]+[0-9]*$/, message: '盘点动线号为大于0的正整数' }    ,
          {  max: 10, message: '数据不能超过10位', trigger: 'blur' }
        ],

        shelvesNumber:[
          { required: false, message: '上架动线号必须填写' },
          { pattern: /^[1-9]+[0-9]*$/, message: '上架动线号为大于0的正整数' }    ,
          {  max: 10, message: '数据不能超过10位', trigger: 'blur' }
        ],
        locationType: [
          {required: true, message: '请输入库位类型', trigger: 'blur'},
        ],
        serialNumber: [
          {required: true, message: '请输入编码', trigger: 'blur'},
        ],
        warehouseCode: [
          {required: true, message: '请选择仓库', trigger: 'blur'},
        ],
        spaceCode: [
          {required: true, message: '请选择库区', trigger: 'blur'},
        ],
        bearType: [
          {required: true, message: '请选择库位承载类型', trigger: 'blur'},
        ],
        storageStrategy: [
          {required: true, message: '请选择存放策略', trigger: 'blur'},
        ],
        ioLock: [
          {required: true, message: '请选择出入库锁', trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    if(this.warehouseData.length === 1){
      this.form.warehouseCode = this.warehouseData[0].code
      this.setSpace(this.form.warehouseCode)
    }
    if(this.bearTypeData.length === 1){
      this.form.bearType = this.bearTypeData[0].code
    }
  },
  methods: {
    // 所属仓库 change
    setSpace(e) {
      getWarehouseSpace(e).then(response => {
        this.spaceData = response.data
        if(this.spaceData.length === 1){
          this.form.spaceCode = this.spaceData[0].code
        }
      })
    },
    // 重置
    reset(){
      this.$refs['form'].resetFields()
    },
    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isDisable = true

          const data = this.form
          locationAdd(data).then(response => {
            this.$message({ message: response.msg, type: 'success' })
            this.$emit('fatherAddMethod')
            this.isDisable = false
          }).catch(() => this.isDisable = false)
        } else {
          return false;
        }
      });

    },
    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'add')
    }
  }
}
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
